<template>
	<view>
		<view class="uni-flex uni-row">
			<text class="uni-flex-item">订单ID：{{order.id}}</text>
			<text class="uni-flex-item" style="text-align: right;">订单状态：{{order.status}}</text>
		</view>
		<view class="uni-flex uni-row">
			<image v-bind:src="store.logoUrl" mode="scaleToFill" style="height: 200upx;width: 200upx;"></image>
			<view class="uni-flex-item uni-column uni-flex" style="text-align: center;">
				<text class="uni-flex-item">{{store.name}}</text>
				<text class="uni-flex-item">{{storeAddress.provinceName}}{{storeAddress.cityname}}{{storeAddress.districtName}}{{storeAddress.streetName}}</text>
				<text class="uni-flex-item">{{store.desc}}</text>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-flex-item" v-for="(orderCommodityDto,orderCommodityDtoIndex) in orderCommodityDtos" :key="orderCommodityDtoIndex">
				<view class="uni-media-list" @click="goService(orderCommodityDto.commodity.id)">
					<image class="uni-media-list-logo" v-bind:src="orderCommodityDto.commodity.logoUrl"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{orderCommodityDto.commodity.name}}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis">{{orderCommodityDto.commodity.desc}}</view>
					</view>
					<view class="uni-media-list-body" style="align-items: center;">
						<view class="uni-text-small">{{orderCommodityDto.commodity.type}}</view>
						<view class="uni-text">{{orderCommodityDto.commodity.price}}</view>
					</view>
					<view style="align-self: center;" class="uni-row">
						<text>{{orderCommodityDto.count}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-flex uni-row uni-flex-item" style="bottom: 0rpx;position: fixed;height: 90rpx;">
			<view class="uni-flex-item" style="align-self: center;">
				<text>{{totalPrice}}</text>
			</view>
			<view class="uni-flex-item" style="position: fixed;right: 0rpx; background-color: #FF3333;">
				<button type="primary" @click="createOrder()">支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '../../components/uni-icons/uni-icons.vue'

	export default {
		data() {
			return {
				orderCommodityDtos: [],
				store: {},
				storeAddress: {},
				order: {},
				totalPrice: 0,
			}
		},
		methods: {
			calcTotalPrice: function() {
				// 计算总价
				var totalPrice = 0;
				Object.entries(this.orderCommodityDtos).forEach((orderCommodityDto) => {
					totalPrice = totalPrice + (orderCommodityDto[1].commodity.price * orderCommodityDto[1].count);
				});
				this.totalPrice = totalPrice.toFixed(2);
			},
			goService: function(serviceId) {
				uni.navigateTo({
					url: '../service/service?serviceId=' + serviceId
				});
			}
		},
		onLoad: async function(data) {
			await new Promise((resolve, reject) => {
				uni.request({
					url: this.baseUrl + '/orderCommodity/listByOrderId',
					method: 'POST',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					data: {
						orderId: data.orderId
					},
					success: res => {
						console.log(res.data.data);
						this.orderCommodityDtos = res.data.data;
						resolve('suc');
					}
				});
			});
			// 获取订单数据
			await new Promise((resolve, reject) => {
				uni.request({
					url: this.baseUrl + '/order/getById?id=' + data.orderId,
					method: 'GET',
					success: res => {
						console.log(res.data.data);
						this.order = res.data.data;
						resolve('suc');
					}
				});
			});

			// 获取商店地址数据
			await new Promise((resolve, reject) => {
				uni.request({
					url: this.baseUrl + '/storeAddress/getByStoreId?storeId=' + this.order.storeId,
					method: 'GET',
					data: {},
					success: res => {
						console.log(res.data.data);
						this.storeAddress = res.data.data;
						resolve('suc');
					}
				});
			});
			// 获取商店数据
			await new Promise((resolve, reject) => {
				uni.request({
					url: this.baseUrl + '/store/getById?id=' + this.order.storeId,
					method: 'GET',
					data: {},
					success: res => {
						console.log(res.data.data);
						this.store = res.data.data;
						resolve('suc');
					}
				});
			});
			this.calcTotalPrice();

		},
		components: {
			uniIcons
		}
	}
</script>

<style>

</style>
